<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-01-18 09:20:44
 * @LastEditTime: 2025-01-20 14:01:26
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \pc\layouts\components\header\index.vue
-->
<template>
    <header class="flex items-center justify-center layout-header bg-[#2893c9]">
        <div class="flex-left">
             <Logo class="flex-none " />
        </div>
         <div class="pl-[50px] menu-wrap">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-top"
                mode="horizontal"
                @select="handleSelect"
                :router="true"
                :ellipsis="false"
            >
                <el-menu-item :index="item.path" v-for="(item,index) in menuList" :key="index">
                   {{item.title}}
                </el-menu-item>
            </el-menu>
        </div>
    </header>
</template>
<script lang="ts" setup>
import User from './user.vue'
import Search from './search.vue'
import Logo from './logo.vue'
import Navbar from './navbar.vue'
const menuList = [
    {
        title:'网站首页',
        path:'/'
    },
     {
        title:'产品介绍',
        path:'/intro'
    },
     {
        title:'合作案例',
        path:'/cooperate'
    },
     {
        title:'媒体报道',
        path:'/media'
    },
     {
        title:'关于我们',
        path:'/about'
    }
]

const activeIndex = ref('/')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log('handleSelect',key, keyPath)
}
</script>

<style lang="scss" scoped>
.flex-left{
    flex: 0 0 var(--header-logo-width);
}
:deep(.el-menu--horizontal){
     border-bottom: 0;
     background: #2893c9;
    .el-menu-item {
        color: #fff;
        &.is-active{
            background: white;
        }
        &:focus, 
        &:hover{
                    background: white;  
        }
    }

}

.layout-header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1999;
}

</style>
